import logo from "./logo.svg";
import "./App.css";
import { Route, Link } from "react-router-dom";
import Home from "./views/Home";
import banner from "./views/banner";
import components from "./views/components";
import Father from "./views/Father";
import RefDome from "./views/RefDome";

function App() {
  return (
    <div className="App">
      <ul className="left-box">
        <li>
          <Link to="/Home">双向绑定，受控组件</Link>
        </li>
        <li>
          <Link to="/banner">增删改查</Link>
        </li>
        <li>
          <Link to="/components">3</Link>
        </li>
        <li>
          <Link to="/Father">父传子，</Link>
        </li>
        <li>
          <Link to="/RefDome">5</Link>
        </li>
      </ul>
      <div className="right-box">
        <Route path="/Home" component={Home} />
        <Route path="/banner" component={banner} />
        <Route path="/components" component={components} />
        <Route path="/Father" component={Father} />
        <Route path="/RefDome" component={RefDome} />
      </div>
    </div>
  );
}

export default App;
